<template>
  <el-select v-bind="$attrs" v-on="$listeners" :value="value" :class="css" @change="handleChange">
    <el-option
      v-for="item in dataList"
      :key="item.id"
      :label="item.categoryName"
      :value="item.id"
    ></el-option>
  </el-select>
</template>
<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      dataList: [],
    }
  },
  computed: {
    filterable() {
      return this.$attrs && this.$attrs.filterable !== false
    },
    css() {
      return (this.$attrs && this.$attrs.class) || 'w-100'
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.loading = true
      this.$http
        .get('/industrial/category/categoryByList/?id=100000000000&level=1')
        .then(res => {
          this.dataList = (res && res.data) || []
        })
        .catch(() => {})
        .then(() => {
          this.loading = false
        })
    },

    handleChange(val) {
      const index = this.dataList.findIndex(it => it.id === val)
      // el-select组件已经有change事件，此处避免冲击
      this.$emit('select', val, index > -1 ? this.dataList[index] : {})
    },
  },
}
</script>
<style lang="scss" scoped></style>
